import '../../Page/CommonMenu.scss'

import { Button, App } from 'antd'
import { useState } from 'react'
import { useEventEmitter, useMount, useUpdateEffect } from 'ahooks'

import { refreshStore } from '../../Config/zustand'
import { DevextremeTemplate } from '../../Utils/Devextreme'
import { PagePagination } from '../../Utils/PageAssembly'
import { getMenuConfig, menuRefresh, getInitData } from '../../Utils/TableConfig'
import { useRequest } from 'alova/client'
import { Http } from '../../Utils/Api'

const ColumnOptions = ({ data, fields }) => []

const pageConfig = { url: 'getCostMonthGetAuditTableList', page: 'AuditTableList' }

const AuditTableList = ({ init, Off }) => {
    const { notification } = App.useApp()
    const DevEvent = useEventEmitter()
    const { refresh } = refreshStore()
    const [loading, setLoading] = useState(false)
    const [total, setTotal] = useState(0)
    const [Pagina, setPagina] = useState({ uuid: init.uuid, pageIndex: 1, pageSize: 10 })
    const [Config, setConfig] = useState()
    const [dataSource, setDataSource] = useState()
    const [Selection, setSelection] = useState([])

    const refreshData = async (paging) => getInitData({ url: pageConfig.url, paging, setTotal, setDataSource })
    useUpdateEffect(() => { menuRefresh({ Pagina, setTotal, setDataSource, setPagina, refreshData }) }, [refresh])
    DevEvent.useSubscription(val => { if (val.type === 'onSelectionChanged') setSelection(val.data) })

    useMount(() => {
        getMenuConfig({ config: pageConfig.page, setPagina, setConfig })
        getInitData({ url: pageConfig.url, paging: Pagina, setTotal, setDataSource })
    })

    const { send } = useRequest(params => Http({ url: 'posCostMonthBatchAuditTable', params }), { immediate: false })

    const onSubmit = (e) => {
        if (Selection.length === 0) return false
        setLoading(true)
        const params = Selection.map(item => ({ uuid: item, IsEnabled: e }))
        send(params).then(res => {
            notification.success({ key: 'fromModify', message: res.message, description: '已完成审核!' })
            Off()
        })
    }

    return (
        <>
            <div className='CommonMenu AuditTableList'>
                <div className='Right'>
                    {Config && dataSource &&
                        <>
                            <div className='Table'>
                                <DevextremeTemplate
                                    dataSource={dataSource}
                                    config={Config}
                                    DevEvent={DevEvent}
                                    ColumnOptions={ColumnOptions}
                                />
                                <PagePagination total={total} Paging={Pagina} DevEvent={DevEvent} />
                            </div>
                        </>
                    }
                </div>
            </div>
            <div className='SubmitBox'>
                <Button size='large' type='primary' loading={loading} onClick={() => onSubmit(2)}>通过</Button>
                <Button size='large' type='primary' loading={loading} onClick={() => onSubmit(-1)} danger>不通过</Button>
            </div>
        </>
    )
}

export default AuditTableList;